<template>
    <view class="aa">
        <u-popup mode="bottom" :show="show" @close="close" @open="open">

            <view class="shuju">
                <view>
                    <p style="margin-left: 15px; height: 40px; line-height: 40px;">排序方式</p>
                </view>
                <view>
                    <view>
                        <p
                            style=" height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">正序排序</span>
                            <span class="box1" :class="{ active: currentTab === 10 }" @click="switchTab(10)"
                                data-tab="10"></span>

                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">倒序排序</span>
                            <span class="box2" :class="{ active: currentTab === 11 }" @click="switchTab(11)"
                                data-tab="11"></span>
                        </p>
                    </view>
                </view>
                <view>
                    <p style="margin-left: 15px; height: 50px; line-height: 50px;">排序属性</p>
                </view>
                <view>
                    <view>
                        <p
                            style=" height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">客户名称</span>
                            <span class="box1" :class="{ active: currentTab === 12 }" @click="switchTab(12)"
                                data-tab="12"></span>

                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">系统编号</span>
                            <span class="box2" :class="{ active: currentTab === 13 }" @click="switchTab(13)"
                                data-tab="13"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">线索来源</span>
                            <span class="box2" :class="{ active: currentTab === 14 }" @click="switchTab(14)"
                                data-tab="14"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">线索状态</span>
                            <span class="box2" :class="{ active: currentTab === 15 }" @click="switchTab(15)"
                                data-tab="15"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">联系人姓名</span>
                            <span class="box2" :class="{ active: currentTab === 16 }" @click="switchTab(16)"
                                data-tab="16"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">手机号码</span>
                            <span class="box2" :class="{ active: currentTab === 17 }" @click="switchTab(17)"
                                data-tab="17"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">归属人员</span>
                            <span class="box2" :class="{ active: currentTab === 18 }" @click="switchTab(18)"
                                data-tab="18"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">跟进次数</span>
                            <span class="box2" :class="{ active: currentTab === 19 }" @click="switchTab(19)"
                                data-tab="19"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">跟进天数</span>
                            <span class="box2" :class="{ active: currentTab === 20 }" @click="switchTab(20)"
                                data-tab="20"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">最后跟进时间</span>
                            <span class="box2" :class="{ active: currentTab === 21 }" @click="switchTab(21)"
                                data-tab="21"></span>
                        </p>
                    </view>
                    <view>
                        <p
                            style="height: 40px;line-height: 40px; border: 1px solid #ccc; display: flex; justify-content: space-between;">
                            <span style="margin-left: 13px; display: block; width: 300px; background-color: ;">下次跟进时间</span>
                            <span class="box2" :class="{ active: currentTab === 22 }" @click="switchTab(22)"
                                data-tab="22"></span>
                        </p>
                    </view>
                </view>

            </view>
            <view class="sure">
                <button style="color: blue;" @click="close">重置</button>
                <button style="color: white; background-color: blue;" @click="close">确定</button>
            </view>
        </u-popup>

        <span @click="show = true">排序 <img src="/static/img/paixu.png" alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"></span>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const show = ref(false);
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}


</script>

<style lang="scss">
.sure {
    display: flex;
    height: 20px;
}

.box1 {
    display: block;
    width: 50px;
}

.box2 {
    display: block;
    width: 50px;
    // background-color: red;
}

.active {
    background-image: url(/static/duigou.png);
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    margin-right: 20px;
    color: blue;
}

.aa {
    display: flex;
    height: 800px;
}

.shuju {
    width: 360px;
    height: 100%;
    border: 1px solid #ccc;
    margin-left: 8px;
}
</style>